import { Image } from "antd-mobile"
import { useNavigate } from "react-router-dom";
import styles from './index.module.css'

const Article = ({ item }) => {

  const navigate = useNavigate()
  const goToDetail = (id: string) => {
    navigate(`/detail?id=${id}`)
  }

  return (
    <div className={styles.article} onClick={() => goToDetail(item.art_id)}>
      <div className={styles.top}>
        <div className={styles.title}>{ item.title }</div>
        <Image
          className={styles.image}
          src={item.cover?.images?.[0]}
          height={68}
          width={68}
        ></Image>
      </div>
      <div className={styles.bottom}>
        <div style={{marginRight: '10px'}}>作者 {item.aut_name}</div>
        <div style={{marginRight: '10px'}}>{item.comm_count} 评论</div>
        <div>发布时间 {item.pubdate}</div>
      </div>
    </div>
  )
}
export default Article